/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 * @format
 */

/**
 * CSS files with the .module.css suffix will be treated as CSS modules
 * and scoped locally.
 */

.homeTop {
  padding: 4rem 0;
  position: relative;
  overflow: hidden;
  height: calc(100vh - var(--ifm-navbar-height));
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  position: relative;
  padding-bottom: 70px;
  background-color: #fff;
  position: relative;
}

.notice {
  position: absolute;
  top: 66px;
  display: flex;
  justify-content: center;
  align-items: center;
  justify-content: start;
  background: #eee;
  border: 2px solid #eaeaea;
  border-radius: 8px;
  padding: 10px;
  min-width: 450px;
}

.notice:hover {
  text-decoration: none;
}

.noticeTag {
  background: linear-gradient(90deg,#ed6292 25%,#ed5760 87.5%);
  border-radius: 5px;
  color: #fff;
  padding: 1px 8px;
  font-weight: bold;
  font-size: 12px;
}

.noticeDesc {
  margin: 0 10px;
  font-size: 12px;
}

.noticeRead {
  font-size: 12px;
}

.slogan {
  font-size: 40px;
  margin-bottom: 30px;
  padding-top: 30px;
}

.homeContent {
  position: relative;
  padding: 130px 0;
}

.homeContentBottom {
  position: absolute;
  bottom: 4rem;
}

.homeContentBottomContainer {
  align-items: flex-end;
  align-items: baseline;
  color: #9C9191;
  /* padding-left: 3rem; */
}
.flexAlignCenter {
  align-items: center;
}

.bannerImg {
  width: 100%;
}

.homeLeft {
  padding-left: 3rem;
}

.homeLeftSubtitle {
  margin-bottom: 60px;
}


.heroLogo {
  max-width: 170px;
  max-height: 170px;
}

@media screen and (max-width: 966px) {
  .homeTop {
    padding: 8rem 0;
    height: auto;
  }

  .homeContent {
    padding-bottom: 0;
  }

  .noDisplay {
    display: none;
  }

  .homeBanner {
    padding: 2rem;
    text-align: center;
  }

  .homeLeft {
    padding-left: 0;
  }

  .introductionContent,
  .introductionImage {
    text-align: center;
  }
}

.buttons {
  display: flex;
  align-items: center;
  justify-content: left;
}

.linkButton {
  border-color: #0077fa;
  border-width: 2px;
}

.getStarted {
  background-color: #0077fa;
  margin-right: 3rem;
  color: #fff!important;
}

.getStarted:hover {
  background: rgba(0,119,250,0.9);
  box-shadow: 0 6px 20px rgba(0,118,255,0.23);
}

.getGuide:hover {
  border-color: rgba(0,119,250,0.9);
  box-shadow: 0 6px 20px rgba(0,118,255,0.23);
}

html[data-theme=dark] .notice {
  background-color: #35363c;
  border: 2px solid rgba(255,255,255 ,0.08)
}

html[data-theme=dark] .linkButton {
  border: 2px solid rgba(255,255,255 ,0.08);
}

html[data-theme=dark] .getStarted {
  background-color: #35363c;
  border: 1px solid rgba(255,255,255 ,0.08);
  color: var(--ifm-font-color-base);
}

html[data-theme=dark] .getStarted:hover {
  background: #35363cb3;
  box-shadow: 0 6px 20px rgba(255,255,255 ,0.08);
}

html[data-theme=dark] .getGuide:hover {
  box-shadow: 0 6px 20px rgba(255,255,255 ,0.08);
}

html[data-theme=dark] .homeTop {
  background-color: #1c1f23;
}


.feature_odd {
  background-color: #fff;
}

html[data-theme=dark] .feature_odd {
  background-color: #1c1f23;
}

.featuresSection {
  background: #fafafa;
}

.featureSectionTitle {
  text-align: center;
  padding: 100px 0 0;
}

.featureSectionDescription {
  text-align: center;
  color: #999;
  font-size: 14px;
  margin: 0;
}

html[data-theme=dark] .featuresSection {
  background-color: #18191a;
}

.flexAlignRight {
  display: flex;
  justify-content: flex-end;
}

.introductionBody {
  padding: 100px 0;
}

.introductionImage {
  width: 354px;
}

.useDetailList {
  text-align: center;
}

.userLogo {
  max-width: 80px;
}

.userDetailTitle {
  text-align: center;
  font-weight: bold
}
html[data-theme=dark] .userDetailTitle {
  color: #999;
}
.userContent {
  display: flex;
  justify-content: space-between;
}

.features {
  padding: 40px 0 100px;
  display: flex;
}

.featureItem {
  display: flex;
  flex-direction: column;
  text-align: center;
  margin: 50px 0;
}

.featureItem a {
  color: #333
}

.featureItem a:hover {
  text-decoration: none;
}

.featureImage {
  margin-bottom: 16px;
}

.featureImage img {
  width: 60px;
}

.featureDescription {
  font-size: 14px;
}

html[data-theme=dark] .featureItem a {
  color: #fff;
}

/*=================== ringContainer =================== */
.ringContainer {
  position: relative;
  top: -8px;
  left: -8px;
}

.circle {
  width: 8px;
  height: 8px;
  background-color: #62bd19;
  border-radius: 50%;
  position: absolute;
  top: 10px;
  left: 10px;
}

.ringring {
  border: 3px solid #62bd19;
  border-radius: 30px;
  height: 16px;
  width: 16px;
  position: absolute;
  left: 6px;
  top: 6px;
  animation: pulsate 1s ease-out;
  animation-iteration-count: infinite;
  opacity: 0.0
}

@keyframes pulsate {
  0% { -webkit-transform: scale(0.1, 0.1); opacity: 0.0; }
  50% { opacity: 1.0; }
  100% { -webkit-transform: scale(1.2, 1.2); opacity: 0.0; }
}
